<template>
  <!--系统用户-->
  <div class="statistics-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="4">
        <el-button type="primary" icon="el-icon-plus" @click="add()">
          添加用户
        </el-button>
        <el-button type="primary" icon="el-icon-delete" @click="delLists2()">回收站</el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="20">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
<!--          <el-form-item>
            <div style="width: 80px">账号:</div>
          </el-form-item>-->
          <el-form-item>
            <el-input
              v-model.trim="queryForm.account"
              style="width: 180px;"
              placeholder="请输入账号模糊查询"
              clearable
            />
          </el-form-item>
<!--          <el-form-item>
            <div style="width: 6 0px">性别：</div>
          </el-form-item>-->
          <el-form-item>
            <el-select
              v-model="queryForm.sex"
              clearable
              placeholder="请选择性别"
              style="width: 180px"
            >
              <el-option
                v-for="item in sex"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
<!--          <el-form-item>
            <div style="width: 80px">真实名字:</div>
          </el-form-item>-->
          <el-form-item>
            <el-input
              v-model.trim="queryForm.realname"
              style="width: 180px;"
              placeholder="请输入真实名字"
              clearable
            />
          </el-form-item>
<!--          <el-form-item>
            <div style="width: 80px">手机号码:</div>
          </el-form-item>-->
          <el-form-item>
            <el-input
              v-model.trim="queryForm.mobile"
              style="width: 180px;"
              placeholder="请输入手机号码查询"
              clearable
            />
          </el-form-item>
<!--          <el-form-item>
            <div style="width: 80px">用户状态：</div>
          </el-form-item>-->
          <el-form-item>
            <el-select
              v-model="queryForm.status"
              clearable
              placeholder="请选择状态"
              @change="selectStatus()"
              style="width: 180px"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh-right"
              @click="restart"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        sortable
        type="index"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="username"
        label="用户账号"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="realname"
        label="用户姓名"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="avatar"
        label="头像"
      >
        <template slot-scope="scope">
          <el-image
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="sex"
        label="性别"
      >
        <template #default="{ row }">
          {{ row.sex == 1 ? '男' : row.sex == 2?'女':'' }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="phone"
        label="手机号码"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="statu"
        label="状态"
      >
        <template #default="{ row }">
          {{ row.status == 1 ? '正常' : row.status == 2 ? '冻结' : '' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            style="font-size: 14px; margin-right: 20px"
            type="text"
            @click="edit(scope)"
          >
            编辑
          </el-button>
          <el-dropdown style="color: #1890ff">
            <span class="el-dropdown-link">
              更多
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="edit(scope)">
                详情
              </el-dropdown-item>
              <el-dropdown-item @click.native="repassword(scope)">
                密码
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.del_flag == 0"
                @click.native="delList(scope.row)"
              >
                删除
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.del_flag == 1"
                @click.native="delLists(scope.row)"
              >
                恢复
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.status == 1"
                @click.native="freeze(scope.row)"
              >
                冻结
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.status == 2"
                @click.native="freezes(scope.row)"
              >
                解冻
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加编辑 -->
    <el-dialog :title="wintit" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" :rules="rules" label-width="100px">
        <el-form-item label="用户账号:"  prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户账号"
            :rows="15"
          />
        </el-form-item>
        <el-form-item v-show="pass" label="登录密码:" prop="pass">
          <el-input
            v-model="form.pass"
            placeholder="请输入登录密码"
            :rows="15"
          />
        </el-form-item>
        <el-form-item v-show="pass" label="确认密码:" prop="pass">
          <el-input
            v-model="form.yes_pass"
            placeholder="请再次输入登录密码"
            :rows="15"
          />
        </el-form-item>
        <el-form-item label="用户姓名:" prop="pass">
          <el-input
            v-model="form.nickname"
            placeholder="请输入用户姓名"
            :rows="15"
          />
        </el-form-item>
        <el-form-item label="头像:">
          <el-upload
            class="uploads"
            action=""
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :http-request="uploadImg"
            :limit="1"
          >
<!--            <img v-if="img != ''" width="150px" :src="img" class="avatar" />-->
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="性别:">
          <el-select
            v-model="form.sex"
            clearable
            placeholder="请选择性别"
            @change="selectType()"
          >
            <el-option
              v-for="item in sex"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱:">
          <el-input v-model="form.email" placeholder="请输入邮箱" :rows="15" />
        </el-form-item>
        <el-form-item label="手机号码:">
          <el-input
            v-model="form.phone"
            placeholder="请输入手机号码"
            :rows="15"
          />
        </el-form-item>
        <el-form-item label="座机:">
          <el-input
            v-model="form.telephone"
            placeholder="请输入座机"
            :rows="15"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-show="addtype" type="primary" @click="send()">
          确 定
        </el-button>
        <el-button v-show="edittype" type="primary" @click="save()">
          确 定
        </el-button>
      </div>
    </el-dialog>

    <!-- 回收站列表 -->
    <el-dialog :title="wintit" :visible.sync="dialogFormVisible2" width="70%">
      <el-table
        v-loading="listLoading"
        :data="list2"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="序号"
          sortable
          type="index"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="username"
          label="账号"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="realname"
          label="姓名"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="avatar"
          label="头像"
        >
          <template slot-scope="scope">
            <el-image
              :src="scope.row.avatar"
              :preview-src-list="[scope.row.avatar]"
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="部门"
        />
        <el-table-column align="center" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              style="font-size: 14px; margin-right: 20px"
              type="text"
              @click="restores(scope)">
              还原用户
            </el-button>
            <el-button
              style="font-size: 14px;"
              type="text"
              @click="deletes(scope)">
              彻底删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 修改密码 -->
    <el-dialog
      title="重新设定密码"
      :visible.sync="dialogFormVisible1"
      width="30%"
    >
      <el-form :model="password" label-width="100px">
        <el-form-item label="用户账号:">
          <el-input
            v-model="password.account"
            placeholder="请输入用户账号"
            :rows="15"
          />
        </el-form-item>
        <el-form-item label="登录密码:" required>
          <el-input
            v-model="password.password"
            placeholder="请输入登录密码"
            :rows="15"
          />
        </el-form-item>
        <el-form-item label="确认密码:" required>
          <el-input
            v-model="password.password"
            placeholder="请重新输入登录密码"
            :rows="15"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="sendpass()">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
  import {
    getAdminUserLists,
    addAdminUsers,
    editAdminUserInfos,
    editAdminUserDelFlags,
    editAdminUserStatuss,
    editAdminUserPasss,
    getOssUploadsParam,
  } from '@/api/common'
  import axios from 'axios'

  export default {
    name: 'Admin',
    data() {
      return {
        sex: [
          {
            value: 1,
            label: '男性',
          },
          {
            value: 2,
            label: '女性',
          },
        ],
        status: [
          {
            value: 1,
            label: '正常',
          },
          {
            value: 2,
            label: '冻结',
          },
        ],
        queryForm: {
          account: '',
          sex: '',
          realname: '',
          mobile: '',
          status: '',
        },
        form: {
          username: '',
          pass: '',
          yes_pass:'',
          nickname: '',
          sex: '',
          email: '',
          phone: '',
          telephone: '',
        },
        password: {
          account: '',
          password: '',
        },
        pass: false,
        disabled: false,
        listLoading: false,
        list: [
          {
            account: '123456',
            name: '张三',
            img: '',
            sex: 1,
            mobile: '1588888888',
            status: 1,
          },
        ],
        list2:[],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        dialogFormVisible: false,
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        wintit: '',
        adminId: '',
        img: '',
        addtype: false,
        edittype: false,
        rules: {
          username: [
            { required: true, trigger: 'blur', message: '请输入用户账号' },
          ],
          pass: [
            { required: true, trigger: 'blur', message: '请输入登录密码' },
          ],
          yes_pass: [
            { required: true, trigger: 'blur', message: '请再次输入登陆密码' },
          ],
          nickname: [
            { required: true, trigger: 'change', message: '请输入用户姓名' },
          ],
        },
      }
    },
    created() {
      this.getData();
      this.getData2();
    },
    methods: {
      //彻底删除
      deletes(row){

      },
      //还原用户
      restores(row){
        let params = {
          id: row.row.id,
          del_flag: 0,
        }
        editAdminUserDelFlags(params).then((data) => {
          this.$message.success('恢复成功！')
          this.getData()
          this.getData2()
        })
      },
      handleRemove(){},
      handlePictureCardPreview(){},
      handleDetail() {},
      //搜索
      search() {
        this.getData()
      },
      restart() {
        this.queryForm = []
        this.getData()
      },
      //导出
      handleExport() {},
      getData() {
        let params = {
          page: this.queryForm.page,
          limit: this.queryForm.list_row,
          nickname: this.queryForm.realname,
          username: this.queryForm.account,
          mobile: this.queryForm.mobile,
          status: this.queryForm.status,
          sex: this.queryForm.sex,
        }
        getAdminUserLists(params).then((data) => {
          this.list = data.data
          this.total = data.count
        })
      },
      getData2() {
        let params = {
          page: this.queryForm.page,
          limit: this.queryForm.list_row,
          nickname: '',
          username: '',
          mobile: '',
          status: '',
          sex: '',
          del_flag: 1
        }
        getAdminUserLists(params).then((data) => {
          this.list2 = data.data
          this.total = data.count
        })
      },
      add() {
        this.dialogFormVisible = true
        this.wintit = '添加'
        this.addtype = true
        this.edittype = false
        this.form = {}
        this.img = ''
        this.pass = true
      },
      edit(row) {
        this.dialogFormVisible = true
        this.wintit = '编辑'
        this.addtype = false
        this.edittype = true
        this.form = this.list[row.$index]
        this.img = this.list[row.$index].avatar
        this.adminId = row.row.id
        this.pass = false
      },
      send() {
        let params = {
          username: this.form.username,
          nickname: this.form.nickname,
          sex: this.form.sex,
          email: this.form.email,
          phone: this.form.phone,
          telephone: this.form.telephone,
          pass: this.form.pass,
          yes_pass: this.form.pass,
          avatar: this.img,
        }
        addAdminUsers(params).then((data) => {
          this.$message.success('添加成功！')
          this.dialogFormVisible = false
          this.getData()
        })
      },
      save() {
        let params = {
          id: this.adminId,
          username: this.form.username,
          nickname: this.form.nickname,
          sex: this.form.sex,
          email: this.form.email,
          phone: this.form.phone,
          telephone: this.form.telephone,
          pass: this.form.pass,
          yes_pass: this.form.yes_pass,
          avatar: this.img,
        }
        editAdminUserInfos(params).then((data) => {
          this.$message.success('修改成功！')
          this.dialogFormVisible = false
          this.getData()
        })
      },
      delList(row) {
        let params = {
          id: row.id,
          del_flag: 1,
        }
        editAdminUserDelFlags(params).then((data) => {
          this.$message.success('删除成功！')
          this.getData()
        })
      },
      delLists(row) {
        let params = {
          id: row.id,
          del_flag: 0,
        }
        editAdminUserDelFlags(params).then((data) => {
          this.$message.success('恢复成功！')
          this.getData()
        })
      },

      //回收站
      delLists2(){
        this.getData2()
        this.dialogFormVisible2 = true;
      },
      freeze(row) {
        let params = {
          id: row.id,
          status: 2,
        }
        editAdminUserStatuss(params).then((data) => {
          this.$message.success('冻结成功！')
          this.getData()
        })
      },
      freezes(row) {
        let params = {
          id: row.id,
          status: 1,
        }
        editAdminUserStatuss(params).then((data) => {
          this.$message.success('解冻成功！')
          this.getData()
        })
      },
      uploadImg(params) {
        const file = params.file,
          fileType = file.type,
          isImage = fileType.indexOf('image') != -1,
          isLt2M = file.size / 1024 / 1024 < 2
        // 这里常规检验，看项目需求而定
        if (!isImage) {
          this.$message.error('只能上传图片格式png、jpg、gif!')
          return
        }
        if (!isLt2M) {
          this.$message.error('只能上传图片大小小于2M')
          return
        }
        getOssUploadsParam().then((res) => {
          const form = new FormData()
          form.append('key', res.data.dir + file.name)
          form.append('OSSAccessKeyId', res.data.accessid)
          form.append('policy', res.data.policy)
          form.append('success_action_status', '200')
          form.append('signature', res.data.signature)
          form.append('file', file)
          console.log(222, res)
          axios({
            url: res.data.host,
            method: 'POST',
            data: form,
            processData: false,
            cache: false,
            contentType: false,
          }).then((data) => {
            this.img = res.data.host + '/' + res.data.dir + file.name
            console.log(66, this.img)
          })
        })
      },
      // detail() {
      //   this.dialogFormVisible = true
      //   this.pass = false
      //   this.wintit = '详情'
      // },
      repassword(row) {
        this.dialogFormVisible1 = true
        this.password.account = this.list[row.$index].username
        this.adminId = row.row.id
      },
      sendpass() {
        let params = {
          id: this.adminId,
          pass: this.password.password,
          yes_pass: this.password.password,
        }
        editAdminUserPasss(params).then((data) => {
          this.$message.success('修改密码成功！')
          this.dialogFormVisible1 = false
          this.getData()
        })
      },
      setSelectRows() {},
      handleSizeChange(val) {
        this.queryForm.list_row = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      selectType(e) {
        this.queryForm.types === e.value
      },
      selectPays(e) {
        this.queryForm.pays === e.value
      },
      selectStatus(e) {
        this.queryForm.status === e.value
      },
    },
  }
</script>

<style lang="scss" scoped>
  .el-button {
    font-size: 14px;
    margin-right: 20px;
  }
</style>
